<template>
  <a-layout class="main-layout">
    <!-- 左侧导航 -->
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      class="sider"
    >
      <div class="logo">
        <ClockCircleOutlined />
        <span v-show="!collapsed">
          Skedule
          <span class="version">v{{ version }}</span>
        </span>
      </div>
      
      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
      >
        <a-menu-item key="tasks">
          <UnorderedListOutlined />
          <span>{{ $t('navigation.tasks') }}</span>
          <router-link to="/tasks" />
        </a-menu-item>
        
        <a-menu-item key="logs">
          <HistoryOutlined />
          <span>{{ $t('navigation.logs') }}</span>
          <router-link to="/logs" />
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <!-- 主内容区 -->
    <a-layout>
      <a-layout-header class="header">
        <!-- 折叠按钮 -->
        <MenuFoldOutlined
          v-if="!collapsed"
          class="trigger"
          @click="() => (collapsed = true)"
        />
        <MenuUnfoldOutlined
          v-else
          class="trigger"
          @click="() => (collapsed = false)"
        />

        <!-- 右侧功能区 -->
        <div class="header-right">
          <!-- 语言切换器 -->
          <LanguageSwitcher />
          
          <!-- 用户信息 -->
          <div class="user-info">
            <a-dropdown>
              <div class="avatar-wrapper">
                <a-avatar>
                  {{ authStore.username.charAt(0).toUpperCase() }}
                </a-avatar>
                <span class="username" v-show="!collapsed">
                  {{ authStore.username }}
                </span>
              </div>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="password" @click="showChangePassword">
                    <template #icon><LockOutlined /></template>
                    {{ $t('navigation.userMenu.changePassword') }}
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="logout" @click="handleLogout">
                    <template #icon><LogoutOutlined /></template>
                    {{ $t('navigation.userMenu.logout') }}
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </a-layout-header>

      <!-- 内容区 -->
      <a-layout-content class="content">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>

    <!-- 修改密码模态窗口 -->
    <ChangePasswordModal
      :open="changePasswordVisible"
      @update:open="changePasswordVisible = $event"
      @success="handlePasswordChanged"
    />
  </a-layout>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UnorderedListOutlined,
  HistoryOutlined,
  ClockCircleOutlined,
  LockOutlined,
  LogoutOutlined
} from '@ant-design/icons-vue'
import ChangePasswordModal from '@/components/ChangePasswordModal.vue'
import packageInfo from '../../../package.json'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const collapsed = ref(false)
const selectedKeys = ref<string[]>(['tasks'])
const changePasswordVisible = ref(false)
const version = packageInfo.version

// 根据路由更新选中的菜单项
watch(
  () => route.path,
  (path) => {
    const key = path.split('/')[1] || 'tasks'
    selectedKeys.value = [key]
  },
  { immediate: true }
)

// 显示修改密码模态窗口
const showChangePassword = () => {
  changePasswordVisible.value = true
}

// 处理密码修改成功
const handlePasswordChanged = () => {
  // 可以添加一些额外的处理逻辑
}

// 处理退出登录
const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}
</script>

<style lang="less" scoped>
.main-layout {
  min-height: 100vh;
}

.sider {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}

.logo {
  height: 64px;
  padding: 16px;
  color: white;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  white-space: nowrap;
}

.logo :deep(.anticon) {
  font-size: 24px;
}

.version {
  font-size: 12px;
  opacity: 0.7;
  margin-left: 8px;
  font-weight: normal;
}

.header {
  background: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.trigger {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
  padding: 0 24px;
}

.trigger:hover {
  color: #1890ff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.avatar-wrapper:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.username {
  font-size: 14px;
  color: #595959;
  font-weight: 500;
}

.content {
  margin: 24px;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  min-height: calc(100vh - 112px);
}

// 响应式设计
@media (max-width: 768px) {
  .header {
    padding: 0 16px;
  }
  
  .content {
    margin: 16px;
    padding: 16px;
  }
  
  .username {
    display: none;
  }
}
</style> 